<template>
    <div @click="itemClick" class="Popover item" :style="itemStyle" :ref="'popover'+item.id">
        <span class="text DIN-Medium">
        {{item.value}}
        </span>
        <div class="value" :style="valueStyle"></div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

const itemWH = 60;
const contentW = document.documentElement.clientWidth;
const contentH = 400;

@Component({
    name: 'Popover'
})
export default class extends Vue {

    @Prop()
    private item!: any;

    private get itemStyle(): string {
        return 'top: '+ this.getTopValue() +'px; left: '+ this.getLeftValue() +'px';
    }

    private get valueStyle(): string {
        return 'height: '+ (this.item.value * itemWH) +'px;'
    }

    private getTopValue(): number {
        var value = Math.round(Math.random() * (contentH - itemWH));
        if (value < itemWH) {
            value = value * 1.2
        }
        return value
    }
    private getLeftValue (): number {
        var value = Math.round(Math.random() * (contentW - itemWH));
        if (value < itemWH) {
            value = value * 1.2
        }
        return value
    }
    private itemClick(): void {
        let obj: any = this.$refs['popover' + this.item.id];
        obj.style.top = '0';
        obj.style.opacity = '0';
        obj.style.transition = 'all 0.5s';
        setTimeout(function () {
            obj.remove()
        }, 600)
    }
}
</script>

<style scoped lang="less">
.Popover {
    overflow: hidden;
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 255, 0, 0.3);
    border-radius: 30px;
    border: 1px solid rgba(0, 255, 0, 0.7);
    box-shadow: 0 0 8px 2px rgba(0, 255, 0, 0.7);
    animation: floatAnimate 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    user-select: none;
    & :active {
        transform: scale(1.2);
    }
    & .value {
        position: absolute;
        width: 100%;
        background-color: #00EE76;
        left: 0;
        bottom: 0;
        user-select: none;
    }
    & .text {
        display: block;
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 60px;
        color: white;
        user-select: none;
    }
    @keyframes floatAnimate {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, 10px);
        }
        100% {
            transform: translate(0, 0);
        }
    }
}
</style>
